<script setup lang="ts">
const main = useMainStore();
</script>

<template>
  <div @click="main.collapse = !main.collapse" class="collapse-bottom">
    <i-ic:twotone-keyboard-double-arrow-left v-if="!main.collapse" />
    <i-ic:twotone-keyboard-double-arrow-right v-else />
  </div>
</template>
<style lang="less" scoped>
.collapse-bottom {
  color: white;
  font-size: 18px;
  background-color: var(--collapse-bottom-background-color);

  display: flex;
  justify-content: center;
  align-items: center;
  height: 36px;

  margin-top: auto;

  position: sticky;
  bottom: 0;

  flex: none;
}
</style>
